<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
            <title>Cindy JS</title>
            <script type="text/javascript" src="../build/js/Cindy.js"></script>
            <link rel="stylesheet" href="../css/cindy.css">


            </head>

	<body style="font-family:Arial;">

        <h1>CindyJS: First Physics</h1>


        <script id='init' type='text/x-cindyscript'>
        l=[];
            i=0;
        </script>

        <script id='csmove' type='text/x-cindyscript'>

        errc(i);
        i=i+.1;
        fillcircle((0,0),100,color->(0,0,.4));
        draw((sin(i),cos(i)));
        l=l++[A.xy];
        if(length(l)>80,l=apply(2..length(l),l_#));
        damp=.96;
        al=damp^(length(l));
        forall(1..length(l),
           draw(l_#,alpha->al,color->(1,.5,.5));
        al=al/damp);


        </script>


        <div  id="CSCanvas" style="width:500px; height:500px; border:2px solid #000000"></div>


        <script type="text/javascript">

            var gslp=[
                      {name:"A", type:"Free", pos:[-5,2],color:[1,.5,.5]},
                      {name:"B", type:"Free", pos:[2,1],color:[1,.8,0],size:9}

                    ];
            var physics=[
                       {behavior:{type:"Environment",deltat:.2,accuracy:10}},
                       {name:"A", behavior:{type:"Mass", vy:.7}},
                       {name:"B", behavior:{type:"Sun"}}
                       ];
            var cdy = CindyJS({canvasname:"CSCanvas",
                        defaultAppearance: {dimDependent: 0.7},
                        movescript:"csmove",
                        initscript:"init",
                        geometry:gslp,
                        behavior:physics}
                        );

        </script>

               <button onclick="cdy.play()" type="button" style="position:absolute; top:610px;left:60px" >Play</button>
        <button onclick="cdy.pause()" type="button" style="position:absolute; top:610px;left:110px" >Pause</button>
        <button onclick="cdy.stop()" type="button" style="position:absolute; top:610px;left:170px" >Stop</button>

	</body>
</html>
